<template>
  <a-modal
    style="width: 50%"
    title="人脸分发到设备"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    width="750px"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="设备名称" prop="deviceId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-spin :spinning="spinning" tip="加载中...">
            <a-select
              :show-search="false"
              placeholder="请选择设备名称"
              @popupScroll="popupScroll"
              @change="change"
              optionFilterProp="children"
              v-model="addForm.deviceId"
              showSearch
              :allow-clear="true"
              :field-names="{ label: 'deviceName', value: 'deviceId' }"
              :option="dataList">
              <a-select-option v-for="(item, index) in dataList" :key="item.index" :value="item.deviceId">
                {{ item.deviceName }}
              </a-select-option>
            </a-select>
          </a-spin>
        </a-form-model-item>
        <a-form-model-item label="人脸识别设备云ID" prop="facesluiceId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入人脸识别设备云ID" v-model="addForm.facesluiceId"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="人脸识别设备customer_id"
          prop="deviceCustomerId"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入人脸识别设备customer_id" v-model="addForm.deviceCustomerId"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="人脸识别设备person_id"
          prop="devicePersonId"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入人脸识别设备person_id" v-model="addForm.devicePersonId"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="人脸识别设备person_name"
          prop="devicePersonName"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入人脸识别设备person_name" v-model="addForm.devicePersonName"></a-input>
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { PersonFacesDispatcher, detailPersonFaces, getDevices } from '@/api/clockingIn'
// import vselect from './vselect'

export default {
    // components: { vselect },
    data () {
        return {
            addRules: {
                deviceId: [
                    { required: true, message: '请输入设备名称!', trigger: 'blur' }
                ],
                facesluiceId: [
                    { required: true, message: '请输入人脸识别设备云ID!', trigger: 'blur' }
                ],
                deviceCustomerId: [
                    { required: true, message: '请输入人脸识别设备customer_id!', trigger: 'blur' }
                ],
                devicePersonId: [
                    { required: true, message: '请输入人脸识别设备person_id!', trigger: 'blur' }
                ],
                devicePersonName: [
                    { required: true, message: '请输入人脸识别设备person_name!', trigger: 'blur' }
                ]
            },
            addForm: {
                personId: '',
                deviceId: undefined, // 设备ID
                facesluiceId: '', // 人脸识别设备云ID
                deviceCustomerId: '',	// 人脸识别设备customer_id
                devicePersonId: '', // 人脸识别设备person_id
                devicePersonName: ''	// 人脸识别设备person_name

            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            disable: true,
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            // mode: "add",
            // titleMap: {
            //     add: '新增',
            //     edit: '编辑'
            // },
            // rowData: null

            dataList: [],
            pageNo: 1,
            max: false,
            spinning: false,
            searchWorld: '',
            total: 0,
            pageSize: 10
        }
    },
    mounted () {
        if (this.max) return
        this.loadDatas()
    },
    methods: {
        loadDatas () {
            this.pageNo = 1
            var param = {
                current: this.pageNo,
                pageSize: this.pageSize,
                deviceName: this.searchWorld, //	设备名称
                brand: '', //	品牌
                deviceIdentifier: '', //	设备生产Identifier
                manufacturer: ''//	制造商
            }
            getDevices(param).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.dataList = res.data.datas
                    this.total = res.data.total
                }
            })
        },
        // 滚动条滚动监听方法
        async popupScroll (e) {
            const that = this
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
            const clientHeight = target.clientHeight // 滑动最低高度
            // 当下拉框滚动条到达底部的时候
            if (!this.max && scrollHeight < clientHeight + 2) {
                this.spinning = true
                // 数据起始条数
                this.pageNo++
                var newList = []
                var param = {
                    current: this.pageNo,
                    pageSize: this.pageSize,
                    deviceName: this.searchWorld, //	设备名称
                    brand: '', //	品牌
                    deviceIdentifier: '', //	设备生产Identifier
                    manufacturer: ''//	制造商
                }
                await getDevices(param).then((res) => {
                    if (res.code == 200) {
                        newList = res.data.datas
                        that.total = res.data.total
                        if (newList.length == 0) {
                            that.max = true
                        }
                    }
                })
                if (that.total != this.dataList.length) {
                    // 数据追加
                    this.dataList = this.dataList.concat(newList)
                }
                this.spinning = false
            }
        },
        // 下拉框搜索方法
        onSearch (val) {
            if (val.length != 0) {
                this.searchWorld = val
                this.dataList = []
                this.max = false
                this.loadDatas()
            } else {
                this.searchWorld = undefined
                this.dataList = []
                this.max = false
                this.loadDatas()
            }
        },
        change (val) {
            console.log(val)
        },
        // 显示
        open (row) {
            this.addForm.personId = row.personId
            // if (row.personId) {
            //     detailPersonFaces(row.personId).then(res => {
            //         console.log(res)
            //         if (res.code == 200) {
            //             let data = res.data
            //             let distributions = data.distributions
            //             if (distributions) this.addForm = distributions
            //             else this.addForm.personId = row.personId
            //         }

            //     })
            // }
            this.visible = true
            return this
        },

        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    const { personId, deviceId, facesluiceId, deviceCustomerId,
                        devicePersonId, devicePersonName } = this.addForm
                    const par = {
                        personId,
                        deviceId: deviceId == undefined ? '' : deviceId,
                        facesluiceId,
deviceCustomerId,
                        devicePersonId,
devicePersonName
                    }
                    PersonFacesDispatcher(par).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.$emit('success')
                            this.visible = false
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
